<template>
	<view v-if="Detail!=null">
		<cu-custom bgColor="theme-bg-color fixed" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"><text>{{Detail.Name}}</text></block>
		</cu-custom>
		
		<!-- 底部打卡按钮 -->
		<view class="fixed-center" >
			<view class="flex  margin-top-xs align-center justify-center">
				<view class="click-item " :class="isAllowCricle==false?'bg-gray text-black':'bg-blue' " @click="SumbitClock">
					<text class="text-bold tex-lg" :class="isAllowCricle==false?' text-black':'text-white' "
						:disabled="isAllowCricle">扫码签到</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import store from "@/store";
	import BigNumber from '@/utils/bignumber.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				showCamera: false, // 控制摄像头显示
				Detail: null,
				CheckSetting: {},
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				keyword: '直接签到',
				polyline: [{
					points: [],
					color: '#FF0000AA', // 多边形颜色
					width: 10, // 多边形宽度
					dottedLine: true // 是否为虚线
				}],
				polygon: [{
					strokeWidth: "2",
					strokeColor: "#FF0000AA",
					fillColor: '#FF0000AA', // 多边形颜色
				}],
				allLines: [],
				circles: [],
				markers: [],
				isAllowCricle: true,
				time: 0,
				distance: 0,
				ClockInfo: null,
				CheckSettingId: 0
			}
		},
		computed: {
			...mapGetters(["userInfo", "userId", "location"]),
		},
		onLoad(option) {
			// 打印请求参数CheckSettingId
			console.log("CheckSettingId", option.checkSettingId);
			this.CheckSettingId = option.checkSettingId;
			this.GetCheckSetting();
		},
		onShow() {
			this.GetOrganizationApi();
		},
		onHide() {
		},
		onUnload() {
		},
		onReady() {
		},
		methods: {
			//得到打卡状态
			async GetClockInfoApi() {
				let {
					Data
				} = await this.$http.PostAsync("/CheckRecord/GetClockInfo", {
					OrganizationId: this.userInfo.OrganizationId,
					UserId: this.userInfo.Id
				});
				this.ClockInfo = Data;
			},
			//打卡提交
			async SumbitClock() {
				if(this.isAllowCricle == false){
					uni.showToast({
						title: "已签到",
						icon: "none",
						duration: 2000
					});
					return;
				}

				try {
					// 打开摄像头扫描二维码，得到扫码后的内容
					const [error, res] = await uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode']
					});

					if (error) {
						uni.showToast({
							title: "扫码失败",
							icon: "none",
							duration: 2000
						});
						return;
					}

					// 获取扫码结果
					const qrContent = res.result;

					console.log('扫码结果:', qrContent);
					console.log('CheckSetting.CheckContent:', this.CheckSetting.CheckContent);

					// 判断扫码结果是否和后台相同
					if(qrContent != this.CheckSetting.CheckContent){
						uni.showToast({
							title: "二维码不匹配",
							icon: "none",
							duration: 2000
						});
						return;
					}

					// 调用签到接口
					let {
						Success,
						Message
					} = await this.$http.PostAsync("/CheckRecord/Check", {
						UserId: this.userInfo.Id,
						OrganizationId: this.userInfo.OrganizationId,
						CheckSettingId: this.CheckSettingId,
						CheckType: "qrcode",
						QrContent: qrContent
					});
				if (Success) {
					uni.showToast({
						title: "签到成功",
						icon: "success",
						duration: 2000
					});
					this.isAllowCricle = false;
					this.keyword = "已打卡";
					//uni.navigateBack();
				} else {
					uni.showToast({
						title: Message || "签到失败",
						icon: "none",
						duration: 2000
					});
				}
				} catch (error) {
					console.error('扫码签到错误:', error);
					uni.showToast({
						title: "签到异常",
						icon: "none",
						duration: 2000
					});
				}
			},
			//得到班级信息
			async GetOrganizationApi() {
				let {
					Data
				} = await this.$http.PostAsync("/Organization/Get", {
					Id: this.userInfo.OrganizationId
				});
				this.Detail = Data;
			},
			async GetCheckSetting() {
				let {
					Data
				} = await this.$http.PostAsync("/CheckSetting/GetOne", {
					Id: this.CheckSettingId
				});
				this.CheckSetting = Data;
			}
		}
	}
</script>
<style>
	.fixed-center {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cur {
		background-color: #0065B7 !important;
		color: white;
		border-radius: 10upx;

	}

	.click-item {
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 新增相机界面样式 */
		.camera-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: #000;
			z-index: 9999;
		}
		
		.camera-buttons {
			position: fixed;
			bottom: 50px;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 0 20px;
		}
		
		.btn-capture {
			background-color: #007AFF;
			color: white;
			border-radius: 50px;
			padding: 10px 30px;
		}
		
		.btn-cancel {
			background-color: #FF3B30;
			color: white;
			border-radius: 50px;
			padding: 10px 30px;
		}
		
		/* 原有样式保持不变 */
		.fixed-bottom {
			position: fixed;
			width: 100%;
			padding: 20upx;
			bottom: 0;
			left: 0;
			z-index: 9999;
			background-color: white;
		}
		
		.cur {
			background-color: #0065B7 !important;
			color: white;
			border-radius: 10upx;
		}
		
		.click-item {
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
</style>